<template>
	<view class="empty-container">
		<image class="empty-icon" :src="icon" />
		<text class="empty-message">{{ message }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			icon: {
				type: String,
				default: 'https://cdn1.sanyedu.com/static/img/null.png',
			},
			message: {
				type: String,
				default: '这里空空如也',
			},
		},
	};
</script>

<style scoped>
	.empty-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* padding-top: 100px; */
		align-items: center;
		height: 100%;
		background-color: #fafbff;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-top: -300px;
		margin-bottom: 20rpx;
		opacity: 0.8;
	}

	.empty-message {
		font-size: 26rpx;
		color: #c1c1c1;
	}
</style>